<template>
  <div class="dv-scroll-board" :class="{ 'is-dark': isDark }">
    <div class="scroll-header" v-if="header.length">
      <div
        v-for="(item, index) in header"
        :key="index"
        class="header-item"
        :style="{ width: columnWidth[index] }"
      >
        {{ item }}
      </div>
    </div>
    
    <div class="scroll-body" ref="scrollBody">
      <div
        class="scroll-rows"
        :style="{ transform: `translateY(-${scrollTop}px)` }"
      >
        <div
          v-for="(row, rowIndex) in displayRows"
          :key="rowIndex"
          class="scroll-row"
          :class="{ 'row-even': rowIndex % 2 === 0 }"
        >
          <div
            v-for="(cell, cellIndex) in row"
            :key="cellIndex"
            class="row-cell"
            :style="{ width: columnWidth[cellIndex] }"
          >
            {{ cell }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useSettingsStore } from '@/store'
import { ThemeEnum } from '@/enums/ThemeEnum'

interface Props {
  header?: string[]
  data?: string[][]
  rowNum?: number
  columnWidth?: string[]
  waitTime?: number
}

const props = withDefaults(defineProps<Props>(), {
  header: () => [],
  data: () => [],
  rowNum: 5,
  waitTime: 2000
})

const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK)

const scrollTop = ref(0)
const scrollBody = ref<HTMLElement>()
let animationId: number | null = null
let timer: any = null

const columnWidth = computed(() => {
  if (props.columnWidth && props.columnWidth.length) {
    return props.columnWidth
  }
  const width = `${100 / (props.header.length || 1)}%`
  return Array(props.header.length).fill(width)
})

const displayRows = computed(() => {
  if (props.data.length <= props.rowNum) {
    return props.data
  }
  return [...props.data, ...props.data.slice(0, props.rowNum)]
})

const startScroll = () => {
  if (props.data.length <= props.rowNum) return
  
  const rowHeight = 40
  const maxScroll = props.data.length * rowHeight
  
  timer = setInterval(() => {
    scrollTop.value += rowHeight
    
    if (scrollTop.value >= maxScroll) {
      scrollTop.value = 0
    }
  }, props.waitTime)
}

onMounted(() => {
  startScroll()
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
  if (animationId) cancelAnimationFrame(animationId)
})
</script>

<style lang="scss" scoped>
.dv-scroll-board {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .scroll-header {
    display: flex;
    background: linear-gradient(to right, #409eff20, #409eff10);
    border-bottom: 2px solid #409eff;
    
    .header-item {
      padding: 12px;
      text-align: center;
      font-weight: bold;
      color: #409eff;
      font-size: 14px;
    }
  }
  
  .scroll-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    
    .scroll-rows {
      transition: transform 0.5s ease;
      
      .scroll-row {
        display: flex;
        height: 40px;
        align-items: center;
        border-bottom: 1px solid #ebeef5;
        
        &.row-even {
          background: rgba(64, 158, 255, 0.05);
        }
        
        .row-cell {
          padding: 0 12px;
          text-align: center;
          color: #606266;
          font-size: 13px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  
  &.is-dark {
    .scroll-header {
      background: linear-gradient(to right, #00d4ff20, #00d4ff10);
      border-bottom-color: #00d4ff;
      
      .header-item {
        color: #00d4ff;
        text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
      }
    }
    
    .scroll-body {
      .scroll-row {
        border-bottom-color: rgba(0, 212, 255, 0.2);
        
        &.row-even {
          background: rgba(0, 212, 255, 0.05);
        }
        
        .row-cell {
          color: #a0cfff;
        }
      }
    }
  }
}
</style>
